<template>
    <div>
        <el-row>
             <el-input v-model.trim="type"  placeholder="请添加分类"></el-input> <el-button @click="addType" type="danger">添加</el-button>   
        </el-row>
         <h1>版表格</h1>   
         <el-table
            :data="$store.state.classType.classtype"
            style="width: 100%">
            <el-table-column
                prop="date"
                label="序号"
                width="180">
                <template  slot-scope="scope">
                    <div>
                        {{scope.$index+1}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="type"
                label="学科"
                width="180">
            </el-table-column>
            <el-table-column
                label="擦我做">
                <template slot-scope="scope">
                    <div>
                        <el-button @click="del(scope.row.id)">删除学科</el-button>
                        <el-button>编辑学科</el-button>  
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {checkType} from "@/api/classType"
    
    export default {
        props:["changeVisibleClass"],
        data(){
            return {
                type:"",
                typeList:[]
            }
        },
        mounted() {
            // 获取所有的类型
            this.$store.dispatch("getType").then(res=>{
                 console.log(res,"type")
            })
        },
        methods: {
            //
            async addType(){
                let res= await checkType(this.type.toUpperCase()); 
                if(res.data.length){
                    alert("添加过了")
                }else{
                    this.$store.dispatch('addType',{type:this.type.toUpperCase()})
                    this.type = ""
                } 
            },
            del(id){
                this.$store.dispatch("delType",id).then(res=>{
                    // 获取最新state
                     this.$store.dispatch("getType")
                })
            }
        },
    }
</script>

<style scoped>
    .el-row{
        display: flex;
    }
</style>